<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/swiper.3.1.2.jquery.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script src="js/queryloader2.min.js"></script>
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/t.css" />
		<link rel="stylesheet" type="text/css" href="css/lcy.css" />
		<link href="css/swiper.3.1.2.min.css" rel="stylesheet" />
		<link href="css/animate.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
				background: url(img/bg.jpg) no-repeat;
				background-size: 100% 100%;
			}
			.circle_ring {
				height: 130%;
				width: 130%;
				position: absolute;
				left: -15%;
				top: -15%;
				background: url(img/ring.png) no-repeat center center;
				background-size: auto 100%;
			}
			.light_right {
				height: 136%;
				width: 136%;
				position: absolute;
				left: -18%;
				top: -18%;
				background: url(img/lightRing.png) no-repeat center center;
				background-size: auto 100%;
				clip: rect(120px 130px 300px 130px);
			}
			.ball {
				position: absolute;
				background: url(img/ball.png) no-repeat left top;
				width: 30%;
				background-size: 100%;
				background-position: left bottom;
			}
			.ball.light span {
				background: url(img/ball.png) no-repeat;
				background-position: left top;
				background-size: 100%;
			}
			.ball span {
				display: block;
				padding-top: 100%;
				width: 100%;
			}
			.page01 .circle {
				height: 32%;
				text-align: center;
				position: relative;
				top: 10%;
			}
			.page01 .circle .wh {
				display: inline-block;
				height: 100%
			}
			.circle .ball01 {
				left: 35%;
				bottom: -28%;
			}
			.circle .ball02 {
				right: -22%;
				top: 64%;
			}
			.circle .ball03 {
				right: -22%;
				top: 3%;
			}
			.circle .ball06 {
				left: -22%;
				top: 64%;
			}
			.circle .ball05 {
				left: -22%;
				top: 3%;
			}
			.circle .ball04 {
				left: 35%;
				top: -30%;
			}
			.lightFlash span {
				animation: flash 2s linear;
				-webkit-animation: flash 2s linear;
				animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
			}
			#map {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			@keyframes falsh {
				from {
					opacity: 1;
				}
				to {
					opacity: 0.5;
				}
			}
			@-webkit-keyframes flash {
				from {
					opacity: 1;
				}
				to {
					opacity: 0.5;
				}
			}
			.circle .text {
				width: 60%;
				height: 60%;
				position: absolute;
				left: 20%;
				top: 20%;
				text-align: center;
				color: #fff;
				display: -webkit-box;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				font-size: 1.4rem;
			}
			@media only screen and (max-width: 320px) {
				.circle .text {
					font-size: 1.2rem;
				}
			}
			.circle .text img {
				width: 90%;
			}
			.pages {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
				display: -webkit-box;
			}
			.pages .pageBody {
				height: 90%;
				width: 100%;
				position: relative;
			}
			.pages .pageBody .container {
				position: absolute;
			}
			.pages .buttons {
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #000;
				height: 11%;
				width: 100%;
				display: -webkit-box;
			}
			.pages .buttons div {
				-webkit-box-flex: 1;
				text-align: center;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				display: -webkit-box;
				position: relative;
			}
			.pages .buttons a {
				color: #fff;
				font-size: 3rem;
				text-decoration: none;
			}
			.pages .iconfont {
				font-size: 3rem;
			}
			.pages .icon-iconfonthotline {
				position: absolute;
				left: 50%;
				
				font-size: 3.5rem;
				top: 50%;
				margin-left: -1.7rem;
				margin-top: -1.8rem;
				
				animation: dese .25s infinite;
				-webkit-animation: dese .25s infinite;
				-moz-animation: dese .25s infinite;
				-o-animation: dese .25s infinite; 
			}
			@media only screen and (max-width: 320px) {
				.pages .iconfont {
					font-size: 2.4rem;
				}
				.pages .icon-iconfonthotline {
					
					margin-left: -1.4rem;
				margin-top: -1.7rem;
				}
			}
			@keyframes dese {
				0% {
					margin-left: -1rem;
				}
				25% {
					margin-top: -2.1rem;
				}
				50% {
					margin-left: -1.8rem;
				}
				100% {
					margin-top: -1.3rem;
				}
			}
			@-webkit-keyframes dese {
				0% {
					margin-left: -1rem;
				}
				25% {
					margin-top: -2.1rem;
				}
				50% {
					margin-left: -1.8rem;
				}
				100% {
					margin-top: -1.3rem;
				}
			}
			.s1,
			.s2 {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.arrow {
				position: absolute;
				z-index: 100;
				width: 3rem;
				height: 3rem;
				background: url(img/up.png);
				background-size: 100%;
				top: 50%;
				margin-top: -1.5rem;
				right: 1rem;
				text-align: center;
				margin-left: -1rem;
				
				animation: arrowUp 2s infinite ease-in;
				-webkit-animation: arrowUp 2s infinite ease-in;
			}
			@keyframes arrowUp {
				0% {
					transform: translateX(0px);
					opacity: 0;
				}
				60% {
					transform: translateX(-2rem);
					opacity: 1;
				}
				100% {
					transform: translateX(0px);
					opacity: 0;
				}
			}
			@-webkit-keyframes arrowUp {
				0% {
					transform: translateX(0px);
					opacity: 0;
				}
				60% {
					transform: translateX(-2rem);
					opacity: 1;
				}
				100% {
					transform: translateX(0px);
					opacity: 0;
				}
			}
		</style>
	</head>

	<body>
		<div class="page01 container">
			<div class="top">
				<img src="img/a01.png" alt="a01" />
			</div>
			<div class="word">
				<h2>实力中信城</h2>
				<span>华府核心商圈的引擎者</span>
			</div>
			<div class="circle">
				<div class="wh">
					<img src="img/a02.png" alt="a02" style="height:100%; width:auto;" />
					<div class='circle_ring'></div>

					<div class="light_right" id="light1">

					</div>
					<div class="light_right" id="light2">

					</div>
					<div class="light_right" id="light3">

					</div>
					<div class="light_right" id="light4">

					</div>
					<div class="light_right" id="light5">

					</div>
					<div class="light_right" id="light6">

					</div>
					<div class="ball ball01 light lightFlash"><span></span></div>
					<div class="ball ball02"><span></span></div>
					<div class="ball ball03"><span></span></div>
					<div class="ball ball04"><span></span></div>
					<div class="ball ball05"><span></span></div>
					<div class="ball ball06"><span></span></div>
					<div class="text text1"><img src="img/logo.png" /></div>
					<div class="text text2">中信邻里汇
						<br/>黄金新财富</div>
					<div class="text text3">城南首席
						<br/>国际美食街</div>
					<div class="text text4">百万新消费
						<br/>财富新磁场</div>
					<div class="text text5">专业商管运营</div>
					<div class="text text6">五星团队护航</div>
				</div>
			</div>
			<div class="bottom">
				招商/销售热线：<a href="tel:028-87806888" style="color: #fff; text-decoration: none;">028-8780 6888</a>
				<br />
				<em>项目地址：剑南大道、牧华路交汇口</em>
			</div>
		</div>
		<div class="pages" style="display:none;">
			<div class="pageBody">

				<div class="page02 container" id="home">
					<div class="top">
						<div>
							<img src="img/logo.png" alt="logo" />
							<h2>华府核心商圈引擎者</h2>
						</div>
					</div>
					<div class="body swiper-container" id="homepage">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="floor01 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
									<img src="img/a08.png" alt="a08" />
									<img src="img/a10.png" alt="a10" />
									<div class="circle01"></div>
								</div>
								<div class="floor02 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
									<img src="img/a09.png" alt="a09" />
									<img src="img/a11.png" alt="a11" />
									<div class="circle02"></div>
								</div>
							</div>

						</div>

					</div>
					<div class="bottom">
						<div>
							50—1000㎡地铁现铺，火热销售中
							<br />
							<a href="video.html">观看视频</a>
						</div>
					</div>
				</div>

				<div class="s1" style="display: none;">
				</div>
				<div class="s2" style="display:none;">
				</div>
				<div class="page05" id="map" style="display:none;">
					<img src="img/page05.jpg" alt="page05" />
					<a style="position: absolute;margin-left: 43%;display:inline-block;width:30%;margin-top: 57%;" href="http://map.baidu.com/mobile/webapp/place/linesearch/foo=bar/from=place&end=word%3D%25E4%25B8%25AD%25E4%25BF%25A1%25E5%259F%258E%26point%3D11581954.90%252C3545432.78%26uid%3D86eb353d2a0cd8035e0d02f0&tab=line"><img src="img/map01.png" style="width:100%; margin-left:-50%; margin-top:0;" alt="map01" /></a>
					<a style="position: absolute;margin-left: 68%;display:inline-block;width:30%;margin-top: 84%;" href="http://map.baidu.com/mobile/webapp/place/linesearch/foo=bar/from=place&end=word%3D%25E4%25B8%25AD%25E4%25BF%25A1%25E5%259F%258E%26point%3D11581954.90%252C3545432.78%26uid%3D86eb353d2a0cd8035e0d02f0&tab=line"><img src="img/map02.png" style="width:100%; margin-left:-50%; margin-top:0;" alt="map02" /></a>
				</div>
			</div>
			<div class="buttons">
				<div><a href="javascript:void(0);" id="mapButton"><i class="iconfont icon-position"></i></a>
				</div>
				<div><a href="tel:028-87806888" id="phone"><i class="iconfont icon-iconfonthotline"></i></a></div>
				<div><a href="javascript:void(0);" id="homeButton"><i class="iconfont icon-iconhome"></i></a></div>
				<div><a href="javascript:void(0);" id="goback"><i class="iconfont icon-iconback"></i></a></div>
			</div>
		</div>

		<div class="audioControl play"></div>
		<div style="display: none;">
			<audio id="media" style="display:none;" src="img/1.mp3" loop controls></audio>
		</div>
		<div style="display:none;">
			<div class="swiper-container s1swiper_raginal" style="">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="page03 container">
							<div class="top ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
								<img src="img/a04.png" alt="a04" />
							</div>
							<div class="body ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"></div>
							<div class="bottom">
								<div class="content">
									<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
										中信邻里汇
										<br /> 城南首席国际美食街区
									</p>
									<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
										中信城左岸打造约3.5万方的城南首席国际美食街区--中信邻里汇，
										<br /> 集特色餐饮、娱乐休闲、社区服务等丰富业态于一体，一店一色情景体验式
										<br /> 意境区，满足区域所需。
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="bg">
							<div class="ts_top">
								<img src="img/area_a.png" onclick="s2Goto(2);" class='ani' alt="a" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s" />
								<br />
								<img src="img/area_b.png" onclick="s2Goto(3);" class=" ani" alt="b" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" />
								<br />
								<img src="img/area_c.png" onclick="s2Goto(4);" class=" ani" alt="c" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" />
							</div>
							<div class="ts_bot">
								<div class="hh">
									<img src="img/area_bg.png" alt="d" />
									<img src="img/area_bg_a.png" class="bg_a ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" />
									<img src="img/area_bg_b.png" class="bg_b ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" />
									<img src="img/area_bg_c.png" class="bg_c ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" />
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide">

						<div class="page06 container">
							<div class="top">
								<img src="img/a13.png" alt="a13" />
							</div>
							<div class="bottom">
								<img src="img/a14.jpg" alt="a14" />
								<br />
								<img src="img/a15.jpg" alt="a15" />
								<img src="img/a16.jpg" alt="a16" />
							</div>
						</div>

					</div>
					<div class="swiper-slide">
						<div class="page07 container">
							<div class="top">
								<img src="img/a17.png" alt="a17" />
							</div>
							<div class="bottom">
								<img src="img/a18.jpg" alt="a18" />
								<br />
								<img src="img/a19.jpg" alt="a19" />
							</div>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="page08 container">
							<div class="top">
								<img src="img/a20.png" alt="a20" />
							</div>
							<div class="bottom">
								<img src="img/a21.jpg" alt="a21" />
								<br />
								<img src="img/a22.jpg" alt="a22" />
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<div class="swiper-container s2swiper_raginal">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="page04 container">
							<div class="top ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
								<img src="img/a07.png" alt="a07" />
							</div>
							<div class="body ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"></div>
							<div class="bottom">
								<div class="content">
									<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
										中信生活汇
										<br /> 华府商圈精品商业综合体
									</p>
									<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
										中信生活汇位于中信城右岸，
										<br /> 是建筑体量约3.28万㎡，
										<br /> 集生活、购物、美食、休闲、娱乐、儿童等多种业态为一体，
										<br /> 全面满足区域人口的消费需求，
										<br /> 丰富消费人群的精神需求。
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="bg dis_box">
							<h2>业态规划</h2>
							<div class="dt_con">
								<div class="li_con _b1 ani" onclick="s2Goto(2);" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
									<div class="area">
										B1
									</div>
									<div class="area_name">
										大型超市
									</div>
								</div>
								<div class="li_con _1f ani" onclick="s2Goto(3);" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
									<div class="area">
										1F
									</div>
									<div class="area_name">
										时尚精品
									</div>
								</div>
								<div class="li_con _2f ani" onclick="s2Goto(4);" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
									<div class="area">
										2F
									</div>
									<div class="area_name">
										运动与儿童游乐
									</div>
								</div>
								<div class="li_con _3f ani" onclick="s2Goto(5);" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
									<div class="area">
										3F
									</div>
									<div class="area_name">
										特色餐饮
									</div>
								</div>
								<div class="li_con _4f ani" onclick="s2Goto(6);" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
									<div class="area">
										4F
									</div>
									<div class="area_name">
										巨幕影院
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="bg">
							<div class="b1_top">
								<div class="top_b1">
									<div class="area">
										B1
									</div>
									<div class="area_name">
										大型超市
									</div>
								</div>
								<p class="_b1">
									品牌超市 品类齐全
									<br /> 
									保证区域社区商业品质
								</p>
							</div>
							<div class="b1_bot">
								<img src="img/b1.png" alt="b1" />
							</div>
						</div>
					</div>
					<div class="swiper-slide">

						<div class="bg">
							<div class="b1_top">
								<div class="top_b1 _1f">
									<div class="area">
										1F
									</div>
									<div class="area_name">
										时尚精品
									</div>
								</div>
								<p class="_1f">
									集合潮流服饰、创意品牌店
									<br /> 
									打造区域潮流达人消费目的地
								</p>
							</div>
							<div class="b1_bot">
								<img src="img/a25.png" class="1f" />
							</div>
						</div>

					</div>
					<div class="swiper-slide">

						<div class="bg">
							<div class="b1_top">
								<div class="top_b1 _2f">
									<div class="area">
										2F
									</div>
									<div class="area_name">
										运动与儿童游乐
									</div>
								</div>
								<p class="_2f">
									深耕社区商业亲子消费
									<br /> 
									全面引领区域商业业态
								</p>
							</div>
							<div class="b1_bot">
								<img src="img/2f.png" alt="2f" />
							</div>
						</div>
					</div>

					<div class="swiper-slide">

						<div class="bg">
							<div class="b1_top">
								<div class="top_b1">
									<div class="area">
										3F
									</div>
									<div class="area_name">
										特色餐饮
									</div>
								</div>
								<p class="_3f">
									涵盖时尚简餐、咖啡甜品等
									<br /> 
									享美食盛宴
								</p>
							</div>
							<div class="b1_bot">
								<img src="img/3f.png" alt="3f" />
							</div>
						</div>

					</div>
					<div class="swiper-slide">

						<div class="bg">
							<div class="b1_top">
								<div class="top_b1 _4f">
									<div class="area">
										4F
									</div>
									<div class="area_name">
										巨幕影院
									</div>
								</div>
								<p class="_b1">
									区域内首家
									<br /> 
									提升区域整体商业形象
								</p>
							</div>

							<div class="b1_bot">
								<img src="img/a26.png" class="1f" />
							</div>
						</div>

					</div>
				</div>
				
			</div>

		</div>
	</body>
	<script>
	var swiper=null;
		var w = 0;
		var i = 0;
		var timer = null;
		var deg = 0;
		var l = 0;
		var index = 1;
		var cdeg = 0;
		var homeSwiper = null;
		var s1Swiper = null;
		var s2Swiper = null;
		var base = 140;
		var s = 1;
		var touched=false;
		$("body").queryLoader2({
			barColor: "#efefef",
			backgroundColor: "#111",
			percentage: true,
			barHeight: 1,
			minimumTime: 500,
			fadeOutTime: 1000,
			onComplete: function() {
				var audio = document.getElementById("media");
				audio.play();
				$(".audioControl").bind("click", function() {
					if ($(this).hasClass("play")) {
						$(this).removeClass("play");
						$(this).addClass("stop");
						audio.pause();
					} else {
						$(this).removeClass("stop");
						$(this).addClass("play");
						audio.play();
					}
				});
				var $l1 = $("#light1");
				w = $l1.width();
				i = w / 2;
				timer = null;
				deg = 0;
				l = w / 2;
				index = 1;
				cdeg = 0;
				s = (w - 140) / 50;
				$(".ball01").bind("touchend", function() {
					if(!touched){
					start();
					$(this).removeClass("lightFlash");
					touched=true;
					}
				});
				$(".floor01").bind("touchend", function () {
				    swiper = null;
					s2();
				});
				$(".floor02").bind("touchend", function () {
				    swiper = null;
					s1();
				});
				$("#mapButton").bind("touchend", function () {
				    swiper = null;
					$("#map").show();
					$(".s1").hide();
					$(".s2").hide();
					$("#home").hide();
				});
				$("#homeButton").bind("touchend", function () {
				    swiper = null;
					$("#home").show();
					$("#map").hide();
					$(".s1").hide();
					$(".s2").hide();
					if (s1Swiper) {
						s1Swiper.destroy();
						s1Swiper = null;
					}
					if (s2Swiper) {
						s2Swiper.destroy();
						s2Swiper = null;
					}
					$(".s1").empty();
					$(".s2").empty(); 
					goHome();
				});
				$("#goback").bind("click", function () {
				    if (swiper) {
				        swiper.slidePrev();
				    }
				});
			}
		});
		$(".text1").siblings(".text").hide();

		function changeClip() {
			i = i + w * 0.01;
			l = l - w * (0.014 + s * 0.004);
			deg = deg - w * 0.012;
			if (i > w * (0.7 - s * 0.026)) {
				index++;
				$(".ball0" + index).addClass("light");
				$(".text" + index).siblings(".text").hide();
				$(".text" + index).show();
				i = w / 2;
				l = w / 2;
				deg = 0;
			}
			var ring = document.getElementById("light" + index);
			if (index <= 6) {
				ring.style.clip = "rect(" + (w / 2) + "px " + i + "px " + w + "px " + l + "px)";
				ring.style["-webkit-transform"] = "rotate(" + (deg - (index - 1) * 60) + "deg)"
				setTimeout(function() {
					changeClip()
				}, 40);
			} else {
				setTimeout(function() {
					$(".pages").show();
					goHome();
					$(".page01").hide();
				}, 1000);
			}
		}

		function start() {
			$(".ball01").addClass("light");
			setTimeout(function() {
				changeClip()
			}, 40);
		}

		function goHome() {
			//if (!homeSwiper) {
			homeSwiper = new Swiper('#homepage', {
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			});
			//}
		}

		function s1() {
			$(".s1").show();
			$("#home").hide();
			$("#map").hide();
			$(".s2").hide();
			if (s2Swiper) {
				s2Swiper.destroy();
				s2Swiper = null;
			}
			$(".s2").empty();
			$(".s1").append($(".s1swiper_raginal").clone());
			$(".s1").find(".swiper-slide").height($(".s1").height());
			$(".s1").find(".s1swiper_raginal").attr("id", "s1_swiper");
			s1Swiper = new Swiper('#s1_swiper', {
				effect: 'cube',
				grabCursor: true,
				cube: {
					shadow: false,
					slideShadows: false,
					shadowOffset: 20,
					shadowScale: 0.94
				},
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			});
			swiper = s1Swiper;
		}
        function s2Goto(index){
        	s2Swiper.slideTo(index);
        }
        function s1Goto(index){
        	s1Swiper.slideTo(index);
        }
		function s2() {
			$(".s2").show();
			$("#home").hide();
			$("#map").hide();
			$(".s1").hide();
			if (s1Swiper) {
				s1Swiper.destroy();
				s1Swiper = null;
			}
			$(".s1").empty();
			$(".s2").append($(".s2swiper_raginal").clone());
			$(".s2").find(".swiper-slide").height($(".s1").height());
			$(".s2").find(".s2swiper_raginal").attr("id", "s2_swiper");
			s2Swiper = new Swiper('#s2_swiper', {
				effect: 'cube',
				grabCursor: true,
				cube: {
					shadow: false,
					slideShadows: false,
					shadowOffset: 20,
					shadowScale: 0.94
				},
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			});
			

			swiper = s2Swiper;
			
		}
	</script>

</html>